<template>
  <div class="tinymce">
<!-- api-key="i0wrglu8k058f7veoncamv54v10tzdn64vhxzj0omtaw9fjl" -->
    <editor
      v-model="editorValue"
      :api-key="editorConfig.apiKey"
      :disabled="editorConfig.disabled"
      :init="editorConfig.init"
      :initial-value="editorConfig.initialValue"
      :inline="editorConfig.inline"
      :output-format="editorConfig.outputFormat"
      :plugins="editorConfig.plugins"
      :toolbar="editorConfig.toolbar"
    />
  </div>
<!--  :id="editorConfig.id"-->
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'Tinymce',
  components: {
    editor: Editor
  },
  data() {
    return {
      editorConfig: {
        apiKey: 'i0wrglu8k058f7veoncamv54v10tzdn64vhxzj0omtaw9fjl',
        // 用于是否只读， true只读
        disabled: false,
        id: 'tinymce',
        init: {
          // 选择器，用于选择相关元素
          // selector: '',
          language: 'zh_CN',
          height: 500,
          menubar: false,
          // false 禁用状态栏
          statusbar: false,
          // 图片组件相关设置
          image_advtab: true,
          automatic_uploads: true,
          image_caption: false,
          image_description: false,
          image_dimensions: true,
          // image_uploadtab: true,
          file_picker_types: 'image media',
          file_picker_callback: function(cb, value, meta) {
            let selectType = 'image/*'
            if (meta.filetype === 'media') {
              selectType = '.mp4,.mp3'
            }
            const input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.setAttribute('accept', selectType)

            input.onchange = function() {
              console.log(input.files, this.files)
              const file = this.files[0]
              const reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onload = function(e) {
                cb(e.target.result, { title: file.name })
              }
            }

            input.click()
          },
          quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable'
        },
        // 编辑器初始内容， 只读模式用
        initialValue: '',
        // 内联模式 则不显示头部 用于只读更好
        inline: false,
        // 输出的格式 html,text 一般用html
        outputFormat: 'html',
        // 插件相关的显示 菜单必须加到 toolbar 才会显示
        // 需要引入的插件 autoresize ( 用于自动调整大小 只读可以加入)
        /**
         * 需要引入的插件
         * lists advlist 类似 ul li 的插件
         * autolink link 链接插件
         * autosave 自动保存
         * code advcode 自定义代码
         * emoticons 笑脸（表情）
         * fullscreen 全屏
         * help 帮助
         * hr 一道分割线
         * image 图片工具
         * imagetools 图片编辑工具
         * media 音频 视频
         * paste 粘贴
         * quickbars 快速工具栏
         * table 表格
         * casechange 文本大小写
         * textpattern 文字模板工具
         * autoresize ( 用于自动调整大小 只读可以加入)
         * */
        plugins: 'lists advlist checklist autolink link autosave advcode code emoticons fullscreen help hr image imagetools media paste quickbars table advtable textpattern casechange preview',
        // 设置工具栏
        toolbar: 'undo redo | styleselect | bold italic underline casechange hr | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | link punbb code emoticons image media fullscreen pastetext table preview help'
      },
      editorValue: ''
    }
  },
  watch: {
    editorValue(value) {
      console.log(value, '666666666666666666')
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
